<template>
  <div class="report-bom">
    <template v-if="templateInfos.length>0">
      <div class="pictureheader  border_style bg_style ">
        <Select clearable class="search-box select-border" @on-clear="handleClear" v-model="tplId" placeholder="请选择模板">
          <Option v-for="(item, index) in templateInfos" @click.native="getTemplateItem(item)" :value="item.id" :key="index" :label="item.tp_name"> </Option>
        </Select>
          <YsButton type="primary" @click="getTemplateItem(tplObj)">查询</YsButton>
        <div class="open-btn">
          <YsButton class="right-between" @click="openTempModal()">添加模版</YsButton>
          <YsButton class="right-between" @click="deleteTempItem()" style="margin-left:10px">删除模版</YsButton>
          <YsButton class="right-between" @click="setFieldAll()" style="margin-left:10px">字段集维护</YsButton>
        </div>
      </div>
      <div class="table-outer border_style bg_style">
        <div class="table-top">
          <ul class="pictureiTop ">
            <li>
              <label class="text_01">模版名称：</label>
              <span class="text_01" :title="tplObj.tp_name">{{templateBean.tp_name||'--'}}</span>
            </li>
            <li>
              <label class="text_01">模版编号：</label>
              <span class="text_01" :title="tplObj.tp_code">{{templateBean.tp_code||'--'}}</span>
            </li>
            <li>
              <label class="text_01">备注：</label>
              <span class="text_01" :title="tplObj.remark">{{templateBean.remark||'--'}}</span>
            </li>
          </ul>
          <div class="table-icon">
            <span @click="exitTempItem" class="icon iconfont text_01 icon-bianji"></span>
            <span @click="browseTempItem" class="icon iconfont text_01 icon-chakan"></span>
          </div>
        </div>
        <proTable class="table-st" :loading="tableLoad" :columns="columns" :data="templateBean.templateFields" @clickPage="onClickPage" :current="page.start_recd" :total="page.allTotal" :pageSize="page.limit_recd">
        </proTable>
      </div>
    </template>
    <template v-else>
      <div class="report-img border_style bg_style">
        <img src="../../assets/images/noData.png" alt="">
        <p class="text_01">暂无内容，请选择区域查看</p>
        <YsButton class="report-btn" type="primary" @click="openTempModal">新增检测报告模版</YsButton>
      </div>
    </template>
    <!-- 新增检测报告模版 -->
    <add-tpl ref="addTplDom" :tplObj="tplObj"></add-tpl>
    <!-- 查看模板 -->
    <browse-tpl ref="browseTplDom"></browse-tpl>
    <!-- 新增模板字段 -->
    <add-tpl-fiel ref="addTplFiellDom" :tplObj="tplObj"></add-tpl-fiel>
  </div>
</template>
<script>
import AddTpl from './components/addTpl'
import browseTpl from './components/browseTpl'
import addTplFiel from './components/addTplFiel'
import { mapGetters, mapActions } from "vuex";
export default {
  name: "reportTpl",
  components: {
    AddTpl,
    browseTpl,
    addTplFiel
  },
  data() {
    return {
      tplId: "",
      fieldFlag: false,
      tplObj: {
        id: null
      },
      templateBean: {},
      page: {
        allTotal: 0,
        start_recd: 1,
        limit_recd: 10
      },
      tableLoad: false,
      columns: [
        {
          title: "序号",
          width: 100,
          key: "sort_key",
          tooltip: true
        },
        {
          title: "字段",
          minWidth: 100,
          key: "field_name",
          tooltip: true
        },
        {
          title: "类型",
          key: "field_type",
          minWidth: 100,
          tooltip: true,
          render: (h, params) => {
            return h("span", `${params.row.field_type == 1 ? "文本" : "数值"}`)
          },
        },
        {
          title: "默认值",
          key: "field_default_val",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: "操作",
          width: 150,
          renderHeader: (h, params) => {
            return h('div', {}, [
              h('span', [
                h('span', '操作'),
                h('i', {
                  class: 'icon iconfont icon-tianjia',
                  style: {
                    fontSize: '16px',
                    marginLeft: '5px',
                    marginRight: '14px',
                  },
                  on: {
                    click: (event) => {
                      this.addTplFielFn()
                    },
                  },
                })
              ])
            ])
          },
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: { class: "mouse-on" },
              },
              [
                h("span", {
                  on: {
                    click: (event) => {
                      this.addTplFielFn(params.row)
                    },
                  },
                  class: "textColor",
                  style: {
                    fontSize: "16px",
                    margin: "0 0 0 8px",

                  },
                }, '编辑'),
                h("span", {
                  domProps: {
                    title: "删除",
                  },
                  class: "textColor",
                  on: {
                    click: (event) => {
                      this.deleteFielFn(params.row)
                    },
                  },
                  style: {
                    fontSize: "16px",
                    margin: "0 0 0 8px",
                  },
                }, '删除'),
              ]
            );
          },
          tooltip: true
        },
      ],
      templateInfos: [],
    };
  },
  created() {
    this.getTempList()
  },
  methods: {
    ...mapActions(["editFieldAPI", "addFieldAPI", "deleteTemplaFieldAPI",
      "getTemplateListAPI", "getTemplateDetailAPI", "delTemplateAPI"
    ]),
    //打开新增模板弹出
    openTempModal() {
      this.$refs.addTplDom.openTplModal(false)
    },
    //获取单个item
    getTemplateItem(item) {
      this.tplObj = item
      this.getBrowseList()
    },
    //select列表
    getTempList() {
      this.getTemplateListAPI({}).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.templateInfos = data.templateInfos
          this.page.total = data.all_recd;
          this.getBrowseList()
        } else {
          this.page = this.$options.data().page
          this.templateInfos = this.$options.data().templateInfos
        }
      })
    },
    //删除模板
    deleteTempItem() {
      if (Object.keys(this.tplObj).length <= 1) return this.$YsMessage.info('请选择要删除的模板');
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          this.delTemplateAPI({ templateInfo: { id: this.tplObj.id } }).then(res => {
            let { data, msg, scode, status } = res;
            if (status === 'ok') {
              this.getTempList()
              this.tplObj = this.$options.data().tplObj
              this.$YsMessage.success(data.message_text);
            }
          }).catch(err => {
            this.$YsMessage.error('删除失败');
          })
        },
      });
    },
    //模板编辑弹出框
    exitTempItem() {
      if (Object.keys(this.tplObj).length <= 1) return this.$YsMessage.info('请选择要编辑的模板');
      this.$refs.addTplDom.openTplModal(true)
    },
    //查看模板详情
    browseTempItem() {
      if (Object.keys(this.tplObj).length <= 1) return this.$YsMessage.info('请选择要查看的模板');
      this.$refs.browseTplDom.getTempList(this.tplObj.id)
    },
    // 获取列表数据
    getBrowseList() {
      this.getTemplateDetailAPI({ template_id: this.tplObj.id }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.templateBean = data.templateBean
        } else {
          this.templateBean = this.$options.data().templateBean
        }
      })
    },
    // 字段删除
    deleteFielFn(item) {
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          this.deleteTemplaFieldAPI({ detailInfo: { id: item.id } }).then(res => {
            let { data, msg, scode, status } = res;
            if (status === 'ok') {
              this.getBrowseList()
              this.$YsMessage.success(data.message_text);
            }
          }).catch(err => {
            this.$YsMessage.error('删除失败');
          })
        },
      });
    },
    //分页
    onClickPage(pageNum) {

    },
    //清楚
    handleClear() {
      this.tplObj = this.$options.data().tplObj
    },
    //跳转到字段级维护
    setFieldAll() {
      this.$router.push({ name: 'fieldAll' });
    },
    //新增字段
    addTplFielFn(item) {
      if (Object.keys(this.tplObj).length <= 1) return this.$YsMessage.info('请选择模板');
      this.$refs.addTplFiellDom.openFielModal(item)
    }
  },
};
</script>
<style lang="less" scoped>
.report-bom {
  height: 100%;
  .report-img {
    border: 1px solid transparent;
    border-radius: 4px;
    height: calc(100% - 20px);
    text-align: center;
    img {
      display: block;
      margin: 200px auto 0;
      width: 142px;
    }
    p {
      font-size: 14px;
      opacity: 0.6;
      text-align: center;
      margin-top: 14px;
    }
    .report-btn {
      margin-top: 50px;
    }
  }
  .pictureheader {
    min-width: 720px;
    height: 72px;
    overflow: hidden;
    display: flex;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid transparent;

    .open-btn {
      margin-left: auto;
      button {
        //   width: 80px;
        //   min-width: 80px;
        height: 40px;
        background: rgba(255, 255, 255, 0.39);
        border: 1px solid #0061ff;
        opacity: 1;
        border-radius: 4px;
        color: #0091ff;
        font-size: 16px;
        font-family: PingFang SC;
      }
    }
    .search-input {
      height: 40px;
      width: 208px;
      margin-right: 10px;
      border-radius: 4px;
    }

    .search-btn {
      margin-left: auto;
    }
  }
  .table-outer {
    min-width: 820px;
    height: calc(100% - 100px);
    border-radius: 4px;
    border: 1px solid transparent;
    .table-st {
      height: calc(100% - 56px);
    }
    .table-top {
      height: 56px;
      line-height: 56px;
      display: flex;
      .pictureiTop {
        width: 80%;
        height: 56px;

        align-items: center;
        display: flex;
        padding: 0 24px;

        li {
          display: flex;
          margin-right: 30px;
          font-size: 16px;

          label {
            opacity: 0.6;
          }
          span {
            min-width: 100px;
            max-width: 300px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .table-icon {
        margin-left: auto;
        padding-right: 16px;
        .icon-bianji {
          margin-right: 8px;
        }
      }
    }
  }
  /deep/ .textColor {
    cursor: pointer;
    color: #0091ff;
    &:hover {
      opacity: 0.8;
    }
  }
}

.search-box {
  width: 232px;
  margin-right: 16px;
}
/deep/ .ivu-modal-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/deep/ .ivu-modal-close {
  right: 18px;
}
/deep/.ivu-input-word-count{
  font-size: 14px;
}
</style>
